<template>
	<view class="home">
		<view class="topnav">
			<u-tabs :list="navList" @click="clickNav" lineWidth="20"
				lineHeight="7"
				:lineColor="`url(${lineBg}) 100% 100%`"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}" 
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		
		<view v-show="loadingState" class="loading-state">
			<u-skeleton
					rows="4"
					title
					loading
					:animate="true"
					avatar
				></u-skeleton>
		</view>
		
		<view class="content">
			<view class="item" v-for="item in list">
				<blogItem :item="item" :isLike.sync="item.isLike" :like_count.sync="item.like_count" @refreshData="refreshData"></blogItem>
			</view>
		</view>
		
		<u-loadmore :status="status" dashed line/>
		
		<view @click="toEdit" class="edit">
			<text class="iconfont icon-edit"></text>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	import blogItem from '@/components/blog-item/blog-item.vue';
	const lineBg = "";
	export default {
		components:{blogItem},
		data() {
			return {
				lineBg:lineBg,
				navList:[
					{name:"最新",type:"publish_date"},
					{name:"热门",type:"view_count"}
				],
				navActive:0,
				loadingState:true,
				list:[],
				limit:5,//每页条数
				status:'loading'
			}
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			
		},
		// 触底
		onReachBottom() {
			console.log("触底了")
			if(this.status=='loadmore'){
				this.getData()
			}
		},
		onPullDownRefresh() {
			this.refreshData()
		},
		methods: {
			// 获取列表数据
			getData(){
				this.status = 'loading';
				let artTemp = db.collection("circle-articles").where(`delState!=true`).field("user_id,title,description,picUrls,view_count,like_count,comment_count,publish_date").getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
				let type = this.navList[this.navActive]['type']
				db.collection(artTemp,userTemp).orderBy(type,"desc").skip(this.list.length).limit(this.limit).get().then(async res=>{
					let list = res.result.data || []
					let idArr = list.map(item=>item._id);
					let likeRes = await db.collection("circle-like").where({
						article_id:db.command.in(idArr),
						user_id:uniCloud.getCurrentUserInfo().uid
					}).get();
					likeRes.result.data.forEach(item=>{
						let findIndex = list.findIndex(it=>it._id==item.article_id)
						if(findIndex!=-1){
							list[findIndex].isLike = true;
						}
					})
					
					let oldList = this.list;
					this.list = [...oldList,...list];
					if(this.list.length==0 || list.length<this.limit){// 没有更多了
						this.status = 'nomore'
					}else{
						this.status = 'loadmore'
					}
				}).finally(_=>{
					this.loadingState = false;
					uni.stopPullDownRefresh()
				})
			},
			clickNav(e){
				this.list = [];
				this.loadingState = true;
				this.navActive = e.index;
				this.getData()
			},
			toEdit(){
				uni.navigateTo({
					url:"/pages/edit/edit?type=add"
				})
			},
			// 刷新数据
			refreshData(){
				this.loadingState = true;
				this.list = []
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topnav{
		margin-bottom: 20rpx;
	}
	.loading-state{
		padding: 30rpx;
	}
	.content{
		.item{
			padding: 30rpx;
			border-bottom: 12rpx solid #f8f8f8;
		}
	}
	.edit{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #0199FE;
		position: fixed;
		z-index: 999;
		bottom: 150rpx;
		right: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8);
		.iconfont{
			color: #fff;
			font-size: 50rpx;
		}
	}
</style>
